import BaseTable from "@/components/base-table";
import { Avatar, Button, TableColumnsType } from "antd";
import OpDrawer, { OpDrawerInit } from "./components/op-drawer.tsx";
import { useRef } from "react";

const SystemUser = () => {
  const columns: TableColumnsType<any> = [
    {
      title: "头像",
      dataIndex: "headImg",
      render: (_, record) => <Avatar src={record.headImg} />,
    },
    { title: "用户名", dataIndex: "username" },
    { title: "姓名", dataIndex: "name" },
    { title: "昵称", dataIndex: "nickName" },
    { title: "部门名称", dataIndex: "departmentName" },
    { title: "角色", dataIndex: "roleName" },
    { title: "状态", dataIndex: "status" },
    { title: "创建时间", dataIndex: "createTime", width: 160 },
  ];
  const opDrawerRef = useRef<OpDrawerInit>(null);

  return (
    <div>
      <BaseTable
        api="/admin/base/sys/user"
        columns={columns}
        toolbarRender={() => (
          <Button
            type="primary"
            onClick={() => {
              opDrawerRef.current?.open();
            }}
          >
            新增
          </Button>
        )}
      />

      <OpDrawer
        ref={opDrawerRef}
        onSuccess={() => {
          // TODO. 更新表格数据
        }}
      />
    </div>
  );
};

export default SystemUser;
